<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>refs</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="./yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="./yl/prop-types.js"></script>

</head>
<body>

<!--
refs 就是react框架里面的id
因为一个组件包含了需求其他组件，所以站在整体来看就是多个ref就是refs
refs.具体的ref名就获取到了具体的html标签。
refs分三种形式
字符串形（不推荐）
回调形
 <input ref={(node)=>{this.input1=node}} />
 回调函数默认会将本节点当做一个参数传接收
 this.input1 因为箭头函数没有this 所以这这个this关键字会往外找，
 外面一层就是本组件实例所以这个时候 this就等于实例本身，this.input1=a
 就等于将input这个节点赋值给实例的input1这个属性。

reactRef形
-->
<div id="app"></div>
<script type="text/babel">
    class Person extends React.Component {
        fnRef =(currentNode)=>{
            this.input2=currentNode;
        }
        render() {
            return <div>
                <button ref="bu1" onClick={() => {
                    //内联回调写法
                    console.log(this.input1.value)
                    //函数写法
                    console.log(this.input2.value)
                }
                }>我是按钮 </button>
                <br/>
                <label>
                    回调函数形，内联方式写法，<br/>
                    会出现因为render方法的调用而重复回掉，<br/>
                    <input ref={c=>this.input1=c} /><br/>
                    所以要写换种写法避免重复回调<br/>
                    <input ref={this.fnRef} />
                    内联于类绑定写法只有推荐使用内联方式
                </label>
            </div>
        }
    }

    ReactDOM.render(<Person age="16" name="123"/>, document.getElementById('app'))
</script>
</body>
</html>
